<!-- 用户信息组件，通常放置也页面右上角，展示用户信息、头像、及下拉菜单 -->
<template>
  <template v-if="userStore.userInfo.userId != ''">
    <span>{{ userStore.userInfo.nickname }}</span>
    <el-dropdown>
      <el-avatar
        :size="45"
        style="margin: 10px"
        :src="userStore.userInfo.avatarUrl || userInitials"
      ></el-avatar>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-if="
              userStore.userInfo.roleId == 1 || userStore.userInfo.roleId == 2
            "
            @click="router.push('/backend')"
            >后台管理</el-dropdown-item
          >
          <el-dropdown-item @click="goToUserCenter">用户中心</el-dropdown-item>
          <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </template>
  <template v-else>
    <el-avatar
      :size="45"
      style="margin: 10px; cursor: pointer"
      src="https://img.neptech.net/i/2025/06/20/50hicq.webp"
      @click="router.push('/login')"
    ></el-avatar>
  </template>
</template>
<script setup>
import router from "@/router";
import { userInfo } from "@/stores/userinfo";
const userStore = userInfo();
onMounted(() => {
  // 初始化认证状态
  userStore.initAuthState();
});
const userInitials = computed(() => {
  return userStore.userInfo.nickname.account[0]
})
const goToUserCenter = () => {
  router.push({
    path: '/personal',
    query: { userId: userStore.userInfo.userId }
  });
};
const logout = async () => {
  // 调用状态管理的登出方法
  await userStore.logout();
  // 登出成功后跳转到登录界面
  router.push("/login");
};
</script>
<style scoped></style>
